<template>
  <div class="ClickChange" :class="{Checkde: checked}" @click="Clicked">{{item.label}} </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    },
    list: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      checked: false
    }
  },
  created () {
    if (this.list.includes(this.item.value)) {
      this.checked = true
    }
  },
  methods: {
    Clicked () {
      if (this.checked) {
        this.checked = false
      } else {
        this.checked = true
      }
      this.$emit('checked', this.item.value)
    }
  }
}
</script>

<style lang="less" scoped>
.ClickChange {
  display:inline-block;
  width: 70px;
  height: 32px;
  line-height: 30px;
  margin: 0 18px 15px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 12px;
  color: #888;
  text-align: center;
}
.Checkde{
  border-color: @blue;
  color: @blue;
}
</style>
